<template>
  <div class="map-mian data-color pr">
    <div id="map"></div>
  </div>
</template>
<script>
import { Scene, LineLayer, PointLayer } from "@antv/l7";
import { ProvinceLayer, CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-Maps";
export default {
  data(){
    return{
      dotLayer:null,
      flyLayer1:null,
      flyLayer2:null,
    }
  },
  methods: {
    showFlyLayer(data){
      if(data){
        this.flyLayer1.show()
        this.flyLayer2.show()
      }else{
          this.flyLayer1.hide()
        this.flyLayer2.hide()
      }
    },
    setDotPoint(data){
      this.dotLayer.setData(data)
    },
    async initMap() {
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [113.803, 23.347],
          pitch: 0,
          style: "blank",
          zoom: 10,
          minZoom: 6,
          maxZoom: 11,
        }),
      });
      scene.on("loaded", () => {
        let dotData = this.$store.state.mapData;
        let flydata = [
          {
            coord: [
              [114.0527779134, 22.5455465546],
              [113.2595185241, 23.1317146641],
            ],
          },
          {
            coord: [
              [116.6777689967, 23.356024358],
              [113.2595185241, 23.1317146641],
            ],
          },
        ];
        const dotPoint = new PointLayer({
          zIndex: 14,
        })
          .source(dotData, {
            parser: {
              type: "json",
              x: "lng",
              y: "lat",
            },
          })
          .shape("circle")
          .color("#ffed11")
          .animate(true)
          .size(40)
          .style({
            opacity: 1.0,
          });
        const flyLine = new LineLayer({ zIndex: 20 })
          .source(flydata, {
            parser: {
              type: "json",
              coordinates: "coord",
            },
          })
          .color("#fff")
          .shape("line")
          .size(1)
          .active(true)
          .animate({
            duration: 3,
            interval: 1,
            trailLength: 0.5,
          })
          .style({
            opacity: 1,
          });

        const flyLine2 = new LineLayer({ zIndex: 16 })
          .source(flydata, {
            parser: {
              type: "json",
              coordinates: "coord",
            },
          })
          .color("#2693e6")
          .shape("line")
          .size(1)
          .active(true)
          .style({
            opacity: 1,
          });

        new ProvinceLayer(scene, {
          data: [],
          geoDataLevel: 1,
          autoFit: true,
          joinBy: ["adcode", "code"],
          adcode: ["440000"],
          depth: 2,
          logoVisible: false,
          stroke: "#1ca4fc",
          label: {
            enable: true,
            field: "NAME_CHN",
            textAllowOverlap: false,
          },
          fill: {
            color: "#003761",
          },
          popup: {
            enable: false,
          },
        });
        this.dotLayer = dotPoint
        this.flyLayer1 = flyLine
        this.flyLayer2 = flyLine2
        scene.addLayer(flyLine);
        scene.addLayer(flyLine2);
        scene.addLayer(dotPoint);
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style lang="less" scoped>
.map-mian {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#map {
  height: 600px;
  width: 990px;
  overflow: hidden;
}
</style>